<!-- 模块说明 -->
<template>
  <div>
    <div class="box">
      <div class="main" ref="echart" id="main"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import * as echarts from 'echarts';
const echart = ref();
const myChart = ref()
interface IProps {
  option: any;
  width?: number;
  height?: number;
}
const props = defineProps<IProps>()
const initChar = () => {
  myChart.value = echarts.init(echart.value,'pink',{
    width: props.width || 600,
    height: props.height || 400,
  });
  myChart.value.setOption(props.option)
}
watch(
  props,
  () => {
    initChar()
  },{
    deep: true,
  }
)
onMounted(() => {
  // console.log( props.option);
  initChar()
})
</script>
<style lang="scss" scoped></style>
